<template>
	<view class="main" style="height: 100vh;">
		<view class="maskClass" v-show="showMask" >
		    <view v-show="showMask" style="width:80%; background-color: #fff;padding: 15px;border-radius: 15rpx;margin: 45% auto;z-index: 1;">
				<view class="login_from_input">
					<view class="form-left">手机号</view>
					<view class="login_from_fun"><input type="number" maxlength="11" v-model="oldMobile" placeholder="请输入联系电话"></view>
				</view>
				<view class="login_from_input">
					<view class="form-left" >验证码</view>
					<view class="login_from_fun">
						<input type="number" style="width: 55%; text-align: left" maxlength="6" placeholder="验证码" v-model="authCode">
						<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#2ebbfe'}" @click="Qzyzm">{{Qztime}}{{Qztext}}</label>
					</view>
				</view>
				<view class="login_from_input">
					<view class="form-left">新密码</view>
					<view class="login_from_fun"><input password="true"  v-model="newPassword" placeholder="请输入新密码"></view>
				</view>
				<view class="login_from_input">
					<view class="form-left">确认密码</view>
					<view class="login_from_fun"><input password="true"  v-model="newRepeatPassword" placeholder="请确认新密码"></view>
				</view>
				<view class="submit_view">
					<button type="primary" class="submit" @click="changePassword()">确定</button>
					<button type="warn" class="canncle" @click="closePassword()">取消</button>
				</view>
		    </view>
		</view>
		<image src="http://113.142.144.25:9301/statics/appimg/login_bg_new.png" style="position: fixed;top:0;left:0;height: 100vh;width:100vw;z-index:-1;"></image>
		<view class="login" >
			<view class="uni-common-mt">
				<view class="uni-form-item uni-column" style="margin:0 auto;">
					<image src="http://113.142.144.25:9301/statics/appimg/login_logo_new.png" style="margin-right: 60rpx;height: 100rpx;width: 110rpx;;float: left;"></image>
					<view style="margin-left: 40rpx;">
						<view class="login_label">
							<text>Hello！</text>
						</view>
						<view class="login_label">
							<text>欢迎登录秦创原</text>
						</view>
					</view>
				</view>
				<view class="uni-form-item uni-column" style="margin-top: 340rpx;">
					<view>
						<input class="uni-input" v-model="loginForm.username" focus placeholder="请输入用户名"/>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view>
						<input class="uni-input" v-model="loginForm.password" hold-keyboard placeholder="请输入密码" password=true >
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="login_province" style="text-align: center;color: cornflowerblue;" @click="login_with_province()">
						陕西省政务服务平台账号登录>>
					</view>
					<view>
						<button @click="bindLogin()">登录</button>
					</view>
				</view>
				<view class="uni-form-item uni-column">
					<!-- #ifdef MP -->
						<image class="login_weixin" @click="login_weixin" src="http://113.142.144.25:9301/statics/appimg/login_weixin_icon_new.png"></image>
					<!-- #endif -->
					<text style="font-size: 25rpx;color: blue;margin-top: 10rpx; float:right;" @click="register()">还没有账号？立即注册</text>
					<text style="font-size: 25rpx;color: red;margin-top: 10rpx; float:left;" @click="toggle()">忘记密码？点此重置</text>
				</view>	
			</view>
		</view>
	</view>
</template>

<script>
	import * as user from '@/api/login.js'
	import * as register from '@/api/register.js'
	
	import {
	        mapMutations
	    } from 'vuex';
	
	export default {
	    data() {
	        return {
	            loading: false,
				loginForm:{
					username:'',
					password:'',
					rememberMe:'1',
					code:''
				},
				infoRes:{},
				showMask:false,
				Qztime:'',
				QzyzmStare:false,
				Qztext:'点击获取',
				authCode:'',
				oldMobile:'',
				newMobile:'',
				oldPassword:'',
				newPassword:'',
				newRepeatPassword:''
	        }
	    },
		onShow(){
			if(this.isAuthorization){
				uni.navigateTo({
					url:'/pages/welcome/welcome'
				})
			}
		},
	    methods: {
	        bindLogin() {
	            this.loading = true;
	            let name = this.loginForm.username,
	            password = this.loginForm.password;
	
				if (password ==  '') {
	                this.loading = false;
	                uni.showModal({
	                    content: "密码不能为空",
	                     showCancel: false
	                })
	                return;
	            }
	            user.login(this.loginForm.username,this.loginForm.password).then((res)=>{
					if(res.code == '200'){
						console.log(res.data)
						uni.setStorage({
							key:'userInfo',
							data:res.data
						})
						uni.showToast({
							icon:'success',
							title:'登陆成功！'
						})
						uni.navigateBack()
					}else{
						// uni.showToast({
						// 	icon:'nonr',
						// 	title:"登录失败，请检查用户名和密码！"
						// })
					}
				})
	        },
	        ...mapMutations(['login']),
			register(){
				console.log('跳转')
				uni.navigateTo({
					url:'/subpages/pages/register/register?mytype='+'1'
				})
			},
			/**
			   *
			   * 获取用户信息
			   */
			login_weixin() {
				let that = this
			    // 展示加载框
			    uni.showLoading({
					title: '加载中',
			    });
			    uni.getUserProfile({
					desc: '登录后可同步数据',
					success: async (obj) => {
			        // this.userInfo = obj.userInfo;
			        // 调用 action ，请求登录接口
			        uni.login({
						provider: 'weixin',
						success: async (res) => {
			            this.code = res.code;
						console.log(this.code)
			            if (res.errMsg == 'login:ok') {
							//通过openId获取用户信息
							user.loginWithWX(this.code).then((res)=>{
								console.log(res)
								uni.getUserInfo().then((infoRes)=>{
									console.log(infoRes)
									uni.setStorage({
										key: 'openId',
										data: res.data.openid
									})
								})
								
								console.log(uni.getStorageSync('openId'))
								if(res.data.errcode == '10004'){
									uni.showToast({
										icon:'error',
										title:'暂未查询到用户'
									})
									console.log('到这里了')
									uni.navigateTo({
										url:'/subpages/pages/register/register?type='+'2'
									})
								}else{
									uni.setStorage({
										key:'userInfo',
										data:res.data
									})
									uni.switchTab({
										url:'/pages/userCenter/userCenter'
									})
									
								}
								
							});
			            }
			          },
			        });
			      },
			      fail: () => {
			        uni.showToast({
			          title: '授权已取消',
			          icon: 'error',
			          mask: true,
			        });
			      },
			      complete: () => {
			        // 隐藏loading
			        uni.hideLoading();
			      },
			    });
			  },
			  toggle(){
			  	this.showMask = true
			  },
			  closePopup(){
			  	this.showMask = false
			  },
			  Qzyzm(){
			  	register.getCode(this.oldMobile).then((res)=>{
			  		if(res.data.code == 'OK'){
			  			uni.showToast({
			  				icon:'none',
			  				title:'验证码已发送！'
			  			})
			  		}else if(res.data.code == '500'){
						clearInterval(interval)
						this.Qztext = '点击获取'
						this.Qztime = ''
						this.QzyzmStare = false
					}else{
			  			uni.showToast({
			  				icon:'none',
			  				title:'请稍后再试！'
			  			})
			  		}
			  	})
			  	var num = 60;
			  	if( this.QzyzmStare == false){
			  		this.Qztime ='60';
			  		this.Qztext = 's后获取';
			  		this.QzyzmStare = true;
			  		var interval = setInterval(() =>{
			  			--this.Qztime
			  		},1000)
			  		setTimeout(()=>{
			  			clearInterval(interval)
			  			this.Qztext = '点击获取'
			  			this.Qztime = ''
			  			this.QzyzmStare = false
			  		},60000)				
			  	}
			  },
			  changePassword(){
			  	if(this.newPassword == this.newRepeatPassword){
			  		if(this.authCode != ''){
			  			user.updatePassword(
			  			{
			  				mobile:this.oldMobile,
			  				password:this.newPassword,
			  				verificationCode:this.authCode,
			  				// username:this.userInfo.username
			  			}).then((res)=>{
			  				if(res.code == 200){
			  					this.showMask = false
								
			  				}
							uni.showToast({
								icon:'none',
								title:'密码重置成功，请用新密码登录！'
							})
			  			})
			  		}else{
			  			uni.showToast({
			  				icon:'none',
			  				title:'请输入验证码！'
			  			})
			  		}
			  	}else{
			  		uni.showToast({
			  			icon:'none',
			  			title:'两次输入密码不一致，请确认！'
			  		})
			  	}
			  },
			  login_with_province(){
				  uni.navigateTo({
				  	url:'/subpages/pages/register/login_province'
				  })
			  }
	    }
	}
</script>

<style lang="scss">
	
	.login {
		padding: 20rpx 40rpx;
		margin: 100rpx 40rpx;
		text-align: left;
		border-radius: 15px;

		.login_label {
			color: #fff;
			margin: 0 auto;
			font-size: 40rpx;
			letter-spacing:12rpx;
		}

		.uni-input {
			background-color: #f0f0f0;
			// border: 0.2rpx solid darkgray;
			height: 80rpx;
			text-align: left;
			padding-left: 40rpx;
			border-radius: 40rpx;
			font-size: 30rpx;
		}

		.uni-form-item {
			margin: 40rpx 0;
			border-radius: 50px;
		}

		button {
			font-size: 30rpx;
			color: #fff;
			background-color: #2b77fb;
			border-radius: 50rpx;
			margin-top: 80rpx;
		}
		
		/deep/ button:active{
			background-color: #2368df;
		}
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		 width:100%;
		 background-color: #eeeeee;
		 margin-top: 25rpx;
		 margin-bottom: 15rpx;
	}
	
	.login_weixin {
		height: 45rpx;
		width: 45rpx;
		float: right;
	}
	
	.maskClass {
		position:fixed;
		bottom:0;
		top:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.5);
		z-index: 10;
	}
		
	.login_from{
		width: 100%; 
		height: auto; 
		box-sizing: border-box; 
		padding: 20upx 8%; 
	}
	
	.login_from_input{ 
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 40upx 0px; 
		margin: 0px auto;  
	} 
	.login_from_name{
		width: 30%; 
	}
	.login_from_fun{ 
		width: 70%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		align-items: center;  
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	.submit_view {
		height: 90rpx;
	}
		
	.submit_view .submit{
		background-color: #016fb8;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: left;
	}
	.submit_view .canncle{
		background-color: darkgray;
		height: 70rpx;
		width: 40%;
		font-size: 28rpx;
		margin-top: 20rpx;
		float: right;
	}
</style>